<template>
	<view class="content">
		<view :style="{ height: capsuleHeight + 'px', top: capsuleTop + 'px' }" class="capsuleBox">
			<image :src="baseUrl+'img/juanjiahui/order.png'" class="myOrder"></image>
			<view class="orderLabel">
				我的预约
			</view>
		</view>
		<view class="titleBox">
			<text class="title1">隽嘉会</text>
			<view class="tilteLine">
			</view>
			<text class="title2">奢华圈层服务平台</text>
		</view>
		<view class="menuBox">
			<view class="menuItem" v-if="state==true" @click="handleClick(() =>$navto.navto('/pages/juanjiahui_dinner/juanjiahui_dinner'))">
				<image :src="menu[0].cover" class="itemPoster"></image>
				<text class="nameEn">
					{{menu[0].en_title}}
				</text>
				<text class="nameZh">
					{{menu[0].name}}
				</text>
				<view class="info">
					>
				</view>
			</view>
			<view class="menuItem" @click="handleClick(() =>$navto.navto('/pages/juanjiahui_banquet/juanjiahui_banquet'))">
				<image :src="menu[1].cover" class="itemPoster"></image>
				<text class="nameEn">
					{{menu[1].en_title}}
				</text>
				<text class="nameZh">
					{{menu[1].name}}
				</text>
				<view class="info">
					>
				</view>
			</view>
			<view class="menuItem" @click="handleClick(() =>$navto.navto('/pages/juanjiahui_pet/juanjiahui_pet'))">
				<image :src="menu[2].cover" class="itemPoster"></image>
				<text class="nameEn">
					{{menu[2].en_title}}
				</text>
				<text class="nameZh">
					{{menu[2].name}}
				</text>
				<view class="info">
					>
				</view>
			</view>
		</view>
		<view class="placeBox">
			<text class="placeLabel">
				场地预约
			</text>
			<view class="placeInfoBox">
				<view class="placeItem" v-for="(item,index) in data" :key="index"
					@click="handleClick(() =>$navto.navto('/pages/juanjiahui_place/juanjiahui_place',{id:item.id}))">
					<image :src="item.cover" class="placePoster"></image>
					<view class="placeName">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- <m-tabbar fixed fill current="3" :tabbar="tabbar">
	</m-tabbar> -->
		<cc-myTabbar :tabBarShow="3"></cc-myTabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				capsuleHeight: 0,
				capsuleTop: 0,
				menu: '',
				data: '',
				isLogon: false,
				user:'',
				state:true
			}
		},
		onShow() {
			uni.hideTabBar();
			this.getData();
			// this.checkLogin();
		},
		onLoad() {
			uni.hideTabBar();
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.capsuleHeight = menuButtonInfo.height * 1; // 获取胶囊按钮的高度
			this.capsuleTop = menuButtonInfo.top; // 获取胶囊按钮的顶部位置
			uni.hideHomeButton();
			this.$request.get('sub_cat_index?parent_id=0').then(res => {
				this.menu = res.data.data;
			})
			this.$request.get('venue_list?type=1').then(res => {
				this.data = res.data.data;
			})
			this.$request.get('grounding_status').then(res => {
				this.state = res.data.data;
			})
			this.getData();
		},
		methods: {
			// 检查登录状态
			checkLogin(callback) {
				if (!this.isLogon) {
					// 未登录，跳转到登录页面
					this.$navto.navto('/pages/login/login'); // 假设登录页面路径为 /pages/login/login
				} else {
					// 已登录，执行回调函数
					if (typeof callback === 'function') {
						callback();
					}
				}
			},
			// 处理点击事件
			handleClick(callback) {
				this.checkLogin(callback);
			},
			// 获取用户数据
			getData() {
				this.$request.get('center').then(res => {
					this.user = res.data.data;
					if (this.user.phone > 0) {
						this.avatar = this.user.head;
						this.isLogon = true;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.placeBox {
		// width: 750rpx;
		padding-top: 85rpx;
		padding-bottom: 70rpx;
		padding-left: 40rpx;
		margin-top: 95rpx;
		background-color: #fff;

		.placeInfoBox {
			width: 710rpx;
			height: 270rpx;
			overflow-x: scroll;
			margin-top: 60rpx;
			display: flex;

			.placeItem {
				width: 260rpx;
				height: 270rpx;
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.placeName {
					width: 100%;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #121212;
				}

				.placePoster {
					width: 260rpx;
					height: 200rpx;
				}
			}
		}

		.placeLabel {
			font-weight: 700;
			font-size: 32rpx;
			color: #121212;
		}
	}

	.menuBox {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 65rpx;

		.menuItem {
			position: relative;
			width: 670rpx;
			height: 230rpx;
			background-color: #fff;
			margin-bottom: 30rpx;

			.info {
				position: absolute;
				display: flex;
				justify-content: center;
				width: 34rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				height: 34rpx;
				right: 30rpx;
				bottom: 45rpx;
				background-color: #000000;
				color: #ffffff;
				border-radius: 50%;
			}

			.nameZh {
				position: absolute;
				font-weight: 700;
				font-size: 30rpx;
				color: #121212;
				left: 305rpx;
				top: 100rpx;
			}

			.nameEn {
				position: absolute;
				font-weight: 700;
				font-size: 18rpx;
				color: #121212;
				left: 305rpx;
				top: 45rpx;
			}

			.itemPoster {
				width: 230rpx;
				height: 230rpx;
			}
		}
	}

	.titleBox {
		margin-top: 210rpx;
		margin-left: 40rpx;
		display: flex;
		align-items: center;

		.title1 {
			font-weight: 700;
			font-size: 40rpx;
			color: #121212;
		}

		.tilteLine {
			width: 50rpx;
			height: 1rpx;
			background-color: #b5b5b5;
			margin-left: 30rpx;
		}

		.title2 {
			font-weight: 700;
			font-size: 40rpx;
			color: #121212;
			margin-left: 30rpx;
		}
	}

	.capsuleBox {
		display: flex;
		align-items: center;
		position: absolute;
	}

	.orderLabel {
		font-weight: 500;
		font-size: 24rpx;
		color: #121212;
		margin-left: 20rpx;
	}

	.myOrder {
		width: 34rpx;
		height: 34rpx;
		margin-left: 40rpx;
	}

	.content {
		width: 100%;
		// height: 100vh;
		background-color: #f0f0f0;
		overflow-y: scroll;
		padding-bottom: 150rpx;
	}
</style>